<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>文章新增页面</title>
    <meta name="keywords" content="">
    <meta name="description" content="">
    <link rel="shortcut icon" href="favicon.ico"> 
    <link th:href="@{/admin/css/bootstrap.min.css?v=3.3.6}" rel="stylesheet">
    <link th:href="@{/admin/css/font-awesome.css?v=4.4.0}" rel="stylesheet">
    <link th:href="@{/admin/css/animate.css}" rel="stylesheet">
    <link th:href="@{/css/webuploader.css}" rel="stylesheet">
    <link th:href="@{/admin/css/style.css?v=4.1.0}" rel="stylesheet">
    <style type="text/css">
    	#editor>div:last-child{
    		height: 500px !important;
    	}
    	#fileList{
    		width: 330px;
    		height: 247px;
    		margin-left: 83px;
    	}
    	#filePicker{
    		margin-left: 210px;
    	}
    </style>
</head>

<body class="gray-bg">
    <div class="wrapper wrapper-content  animated fadeInRight article">
        <div class="row">
        <div class="col-sm-8">
                <div class="ibox float-e-margins">
                    <div class="ibox-content">
                        <div class="row">
                            <div class="col-sm-12">
                                    <div class="form-group">
                                        <label>文章标题</label>
                                        <input type="text" placeholder="此栏为文章的标题" id="title" class="form-control">
                                    </div>
                                    <div class="form-group">
                                        <label>摘要</label>
                                        <input type="text" placeholder="此栏为文章的摘要" id="digest" class="form-control">
                                    </div>
                                    <div class="form-group">
                                        <label>作者</label>
                                        <input type="text" placeholder="文章作者" id="author" class="form-control">
                                    </div>
                                    <div class="form-group">
                                        <label>关键词</label>
                                        <input type="text" placeholder="关键词之间请用'#'号隔开" id="keyWord" class="form-control">
                                    </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-sm-4">
            	<!--dom结构部分-->
				<div id="uploader-demo">
				    <!--用来存放item-->
				    <div id="fileList" class="uploader-list"></div>
				    <div id="filePicker">选择图片</div>
				</div>
            </div>
		</div>
		<div class="row" id="editor" ></div>
        <div class="pull-left" >
	           <button class="btn btn-white btn-default" type="button" id="add">确认新增</button>
        </div>
    </div>
    <!-- 全局js -->
    <script th:src="@{/admin/js/jquery.min.js?v=2.1.4}"></script>
    <script th:src="@{/admin/js/bootstrap.min.js?v=3.3.6}"></script>
	<!-- 注意， 只需要引用 JS，无需引用任何 CSS ！！！-->
    <script th:src="@{/admin/js/wangEditor/wangEditor.min.js}"></script>
    <script th:src="@{/js/webuploader.js}"></script>
    <script th:inline="javascript">
    var coverImage;
    	/**图片上传开始*/
    	var applicationPath = window.applicationPath === "" ? "" : window.applicationPath || "../../";
		var uploader = WebUploader.create({
			// 选完文件后，是否自动上传。
		    auto: true,
		    // swf文件路径
		    swf: applicationPath+'/js/Uploader.swf', 
		    // 文件接收服务端。
		    server: '/aixuegao-pc-web/file/upload/',
		    // 选择文件的按钮。可选。
		    // 内部根据当前运行是创建，可能是input元素，也可能是flash.
		    pick: '#filePicker',
		    // 不压缩image, 默认如果是jpeg，文件上传前会压缩一把再上传！
		    resize: false,
		    accept: {
		        title: 'Images',
		        extensions: 'gif,jpg,jpeg,bmp,png',
		        mimeTypes: 'image/*'
		    }
		});
    	
		// 当有文件添加进来的时候
		uploader.on( 'fileQueued', function( file ) {
		    var $li = $(
		            '<div id="' + file.id + '" class="file-item thumbnail">' +
		                '<img>' +
		                '<div class="info" style="text-align:center;">' + file.name + '</div>' +
		            '</div>'
		            ),
		        $img = $li.find('img');
		    // $list为容器jQuery实例
		    $('#fileList').append( $li );
		    // 创建缩略图
		    // 如果为非图片文件，可以不用调用此方法。
		    // thumbnailWidth x thumbnailHeight 为 100 x 100
		    uploader.makeThumb( file, function( error, src ) {
		        if ( error ) {
		            $img.replaceWith('<span>不能预览</span>');
		            return;
		        }

		        $img.attr( 'src', src );
		    }, 200, 200);
		});
		
		// 文件上传过程中创建进度条实时显示。
		uploader.on( 'uploadProgress', function( file, percentage ) {
		    var $li = $( '#'+file.id ),
		        $percent = $li.find('.progress span');
		    // 避免重复创建
		    if ( !$percent.length ) {
		        $percent = $('<p class="progress"><span></span></p>')
		                .appendTo( $li )
		                .find('span');
		    }
		    $percent.css( 'width', percentage * 100 + '%' );
		});

		// 文件上传成功，给item添加成功class, 用样式标记上传成功。
		uploader.on( 'uploadSuccess', function( file ,response) {
			coverImage=response.data;
		    $( '#'+file.id ).addClass('upload-state-done');
		});

		// 文件上传失败，显示上传出错。
		uploader.on( 'uploadError', function( file ) {
		    var $li = $( '#'+file.id ),
		        $error = $li.find('div.error');
		    // 避免重复创建
		    if ( !$error.length ) {
		        $error = $('<div class="error"></div>').appendTo( $li );
		    }
		    $error.text('上传失败');
		});
		// 完成上传完了，成功或者失败，先删除进度条。
		uploader.on( 'uploadComplete', function( file ) {
		    $( '#'+file.id ).find('.progress').remove();
		});
    	/**封面图片上传结束*/
        var E = window.wangEditor
        var editor = new E('#editor');
        editor.customConfig.uploadImgMaxLength = 1;
        editor.customConfig.uploadImgMaxSize = 10 * 1024 * 1024;
        editor.customConfig.uploadImgServer = '/aixuegao-pc-web/file/upload/' ;
        editor.customConfig.uploadFileName = 'file';
        
        editor.customConfig.uploadImgHooks = {
        	    error: function (xhr, editor) {
        	    	alert('图片上传失败');
        	    },
        	    customInsert: function (insertImg, result, editor) {
        	        // 图片上传并返回结果，自定义插入图片的事件（而不是编辑器自动插入图片！！！）
        	        // insertImg 是插入图片的函数，editor 是编辑器对象，result 是服务器端返回的结果
        	        // 举例：假如上传图片成功后，服务器端返回的是 {url:'....'} 这种格式，即可这样插入图片：
        	        console.log(result)
        	        var url = 'www.aixuegao-pc-web/aixuegaoimg/'+result.data
        	        insertImg(url);
        	    }
        	}
        editor.create();
        
		$('#add').on("click",function(){
			var json = {
						   title : $('#title').val(),
						   keyWord : $('#keyWord').val(),
						   content : editor.txt.html(),
						   columnId : [[${columnId}]],
						   author : $('#author').val(),
						   digest : $('#digest').val(),
						   coverImage : coverImage
					   };
			$.ajax({
				url :"/aixuegao-pc-web/admin/article/add",
				type : "POST",
				dataType : "json",
				data :json,
				/* beforeSend: function(){  
				}, */
				success : function(data,textStatus) {
					if(data.rspCode=='000000'){
						var columnId = [[${columnId}]];
						window.location.href='/aixuegao-pc-web/admin/blog/'+columnId;
					}else{
						alert('新增文章失败！');
					}
				}
			})	
		});
    </script>
    <!-- 自定义js -->
    <script th:src="@{/admin/js/content.js?v=1.0.0}"></script>
</body>
</html>
